<template>
	<view class="bottom">
		<view class="min-text">
			<view class="text1">
				<text>智能数字人</text>
			</view>
			<view class="text2">
				<text>实验室管理系统</text>
			</view>
			<view class="name" v-if="user">
				<text>欢迎您,&nbsp;{{ user.name }}</text>
				<icon class="ic-logout iconfont bs-logout" type="" @click="logout"></icon>
			</view>
		</view>

		<image class="img" src="@/static/banner_home_img.png" mode="widthFix"></image>
	</view>

	<uv-toast ref="toast"></uv-toast>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'


const props = defineProps({
	user: {
		type: Object,
		default: () => ({})
	}
})
const toast = ref(null)

function logout() {
	uni.showModal({
		title: '确认退出',
		content: '确定要退出登录吗？',
		success: async (res) => {
			if (res.confirm) {
				await confirm()
			}
		}
	})
}

function confirm() {
	uni.removeStorageSync('user')
	toast.value.show({
		message: '退出登录成功',
		type: 'success',
	})
	setTimeout(() => {
		uni.reLaunch({
			url: '/pages/login/login'
		})
	}, 500)
}
</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

.bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 5px;

	.min-text {
		padding-bottom: 30px;
		display: inline;
		align-items: center;
		text-align: center;
		font-size: 26px;
		color: white;
		font-weight: bold;
		margin-left: 15px;

		.text1 {
			margin-bottom: 5px;
		}

		.name {
			justify-self: center;
			align-items: center;
			margin-top: 10px;
			font-size: 14px;

			.ic-logout {
				font-size: 14px;
				margin-left: 3px;
				color: #e5f6e8;
			}
		}
	}


	.img {
		right: 15px;
		max-width: 40vw;
		max-height: 20vh;
		margin-bottom: 20px;
	}
}
</style>